<template>
  <div class="main">
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad">
      <van-card v-for="item in film_list"
                :key="item.filmId"
                @click="show_detail(item.filmId)">
        <template #thumb>
          <!-- 电影缩略图 -->
          <img :src="item.poster"
               width="66"
               alt="" />
        </template>
        <template #title>
          <!-- 电影标题 -->
          <div class="title">{{ item.name }}</div>
        </template>
        <template #desc>
          <!-- 电影描述 -->
          <!-- v-lazy -->
          <div class="desc">
            <div>
              观众评分：<span class="grade">{{ item.grade }}</span>
            </div>
            <div>
              <!-- 主演的显示涉及到数据的处理，需要使用过滤器 -->
              主演：{{ item.actors | parseActors }}
            </div>
            <div>{{ item.nation }} | {{ item.runtime }}分</div>
          </div>
        </template>
        <template #tags>
          <!-- 购票按钮 -->
          <van-tag plain
                   class="buyTicket"
                   size="large"
                   color="#ff5f16"
                   type="danger">购票</van-tag>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
// 导入uri
import uri from "@/config/uri";
// 导入vant相关组件并注册（Toast不是组件，是方法）
import Vue from "vue";
import { Card, Toast, Tag, List } from "vant";
import { Lazy } from 'swiper';
Vue.use(Card);
Vue.use(Tag);
Vue.use(List);
export default {
  data () {
    return {
      // 该组件电影列表的数据
      film_list: [],
      // 页码
      pageNum: 1,
      // 表示当前是否处于数据加载的时候
      loading: false,
      // 表示所有的数据是否全部加载完毕（如果其为true则即便滑动到底部也不会再触发异步请求）
      finished: false,
    };
  },
  // 获取数据（进来）【没有使用价值了】
  // created() {
  //     this.$http.get(uri.getNowList).then((res) => {
  //         if (res.status === 0) {
  //             // 保存接口获取到的电影数据
  //             this.film_list = res.data.films;
  //         } else {
  //             // 接口调用问题的提示
  //             Toast("获取列表数据失败！");
  //         }
  //     });
  // },
  filters: {
    // 处理演职人员信息
    parseActors (actors) {
      let str = "";
      if (actors) {
        actors.forEach((el) => {
          str += el.name + " ";
        });
      } else {
        str = "暂无主演";
      }
      return str.length > 17 ? str.substr(0, 17) + "..." : str;
    },
  },
  methods: {
    // 页面进来的时候和加载更多的时候都会触发
    onLoad () {
      // 请求数据
      this.$http.get(uri.getNowList + "?pageNum=" + this.pageNum).then((res) => {
        console.log(res)
        if (res.status === 0) {
          // 最大的页码数
          let maxPage = Math.ceil(res.data.total / 10);

          // 保存接口获取到的电影数据(不能覆盖)
          // this.film_list = res.data.films;
          // this.film_list.push(...res.data.films)
          this.film_list = [...this.film_list, ...res.data.films];

          // 给页码加加
          if (this.pageNum < maxPage) {
            this.pageNum++;
          } else {
            // 没有数据了
            // 若数据已全部加载完毕，则直接将 `finished` 设置成 `true` 即可
            // 告诉list组件，后续再无数据，即便滚动条到达底部也不要再触发onload事件了
            this.finished = true;
          }
          // v-Lazy
          // 本次请求结束
          // 数据更新完毕后，将 `loading` 设置成 `false`
          // 本次请求结束如果不将其设置成false则无法进行下一次请求
          this.loading = false;
        } else {
          // 接口调用问题的提示
          Toast("获取列表数据失败！");
        }
      });
    },
    // 去详情
    show_detail (filmID) {
      this.$router.push("/film/" + filmID);
    },
  },
};
</script>

<style scoped>
/* 电影标题样式 */
.title {
  color: #191a1b;
  font-size: 16px;
  line-height: 22px;
}

/* 电影描述样式 */
.desc {
  color: #797d82;
  font-size: 13px;
}

/* 电影评分 */
.grade {
  color: #ffb232;
  font-size: 14px;
}

/* 购票按钮 */
.buyTicket {
  float: right;
  position: relative;
  top: -35px;
}

/* 去除缩略图的圆角 */
.van-card__thumb img {
  border-radius: 0px;
}

/* 重新设置缩略图的宽度 */
.van-card__thumb {
  width: 70px;
}

/* 让底部上去50px */
.main {
  margin-bottom: 50px;
}
</style>